<template>
  <div class="register-main base-main">
    <p class="color333 title">身份验证</p>
    <div class="centent">
      <p class="color333 fs12 sub-title">手机号</p>
      <p class="line-bottom input-p fs15 w100">
        <span class="inline-block w10">+86</span>
        <span class="inline-block w80">
          <input v-model="phoneNum" class="w100 phone" type="number" placeholder="请输入手机号"/>
        </span>
      </p>
      <p class="color333 fs12 sub-title">验证码</p>
      <p class="line-bottom input-p fs15 w100">
        <span class="inline-block">
          <input v-model="code" type="number" class="code-input" placeholder="请输入验证码"/>
          <span class="flr color3D7EFF">获取验证码</span>
        </span>
      </p>
    </div>

    <p class="btn-register">
      <span class="base-btn fs15" @click="haneldNext">下一步</span>
    </p>

    <p class="text-c btn-to-login">
      <span class="color333 fs14" @click="toLogin">返回登录</span>
    </p>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    data() {
      return {
        phoneNum: '', // 手机号
        code: '', // 验证码
        pwd: '', // 密码
      }
    },
    methods: {
      // 下一步
      haneldNext() {
        const _this = this
        let phoneTest = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/
        if(!_this.phoneNum) {
          _this.$toast("请输入手机号")
          return false
        } else if (!phoneTest.test(_this.phoneNum)) {
          _this.$toast("请填写正确手机号")
          return false
        } else if (!_this.code) {
          _this.$toast("请填写验证码")
          return false
        } else {
          console.log(this.phoneNum);
          console.log(this.code);
        }
      },
      // 返回登录
      toLogin() {
        this.$router.push({
          name: 'login'
        })
      },
    },
  }
</script>

<style scoped lang="scss">
  @import '../../assets/css/register.scss';
</style>
